<template>
  <div class="myvue">
    <div>
      <div class="bg">
        <van-image width="100%" height="100%" fit="cover" src="http://liufusong.top:8080/img/profile/bg.png" />
      </div>

      <div class="login">
        <img :src="Src" alt="" />
        <p class="user">{{ nickname }}</p>
        <van-button type="primary" size="small" to="/login" v-if="isShow"
          >去登录</van-button
        >
        <van-button
          v-else
          type="primary"
          size="small"
          class="logout"
          @click="loginOutFn"
          >退出</van-button
        >
        <p v-show="!isShow">编辑个人资料 ▶</p>
      </div>
    </div>

    <div class="main">
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star-o" text="我的收藏" to="/collection" />
        <van-grid-item icon="wap-home-o" text="我的出租" to="/rent" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="idcard" text="成为房主" />
        <van-grid-item icon="user-circle-o" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>

    <div class="bg-footer">
      <van-image
        width="100%"
        height="100%"
        src="http://liufusong.top:8080/img/profile/join.png"
      />
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/storage'
import { userMsg, logout } from '@/api/user'

export default {
  data () {
    return {
      nickname: '游客',
      isShow: true,
      Src: 'http://liufusong.top:8080/img/profile/avatar.png'
    }
  },
  async created () {
    const { body } = await userMsg()
    console.log(body)
    if (getToken()) {
      this.isShow = false
      this.nickname = body.nickname
      this.Src = `http://liufusong.top:8080${body.avatar}`
    }
  },
  methods: {
    loginOutFn () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否确认退出'
        })
        .then(() => {
          logout()
          delToken()
          this.isShow = true
          this.nickname = '游客'
          this.Src = 'http://liufusong.top:8080/img/profile/avatar.png'
        })
        .catch(() => {

        })
    }
  }
}
</script>

<style scoped>
.myvue {
  position: relative;
  margin: 0 auto;
}
.bg {
  max-height: 200px;
  position: relative;
}
.login {
  position: absolute;
  background: #fff;
  width: 70%;
  height: 180px;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
}
.login img {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
}
.login p{
  color: #666;
}
.user {
  margin-top: -20px;
  margin-bottom: 20px;
}
.main {
  width: 100%;
  margin-top: 75px;
}
.bg-footer {
  margin: 40px auto;
  width: 90%;
  height: 100%;
}
.logout {
  width: 50px;
  height: 20px;
  border-radius: 10px;
}
</style>
